<template>
  <div class="comprehensive">
    <header>
      <p class="title">汽车行业重要资源测绘与安全分析平台</p>
    </header>
    <div class="timeDv">
      2021年5月26日 星期五
    </div>
    <article>
      <ul class="leftContent">
        <li class="fixedWH" />
        <li class="fixedWH" />
        <li class="fixedWH" />
      </ul>
      <div class="rightContent">
        <div class="topDv">
          <div class="topLeft">
            <ul class="topTitle">
              <li />
              <li />
              <li />
            </ul>
            <div class="topContent" />
          </div>
          <div class="topRight">
            <div class="fixedWH" />
            <div class="fixedWH" />
          </div>
        </div>
        <div class="bottomDv" />
      </div>
    </article>
  </div>
</template>

<script>
import './rem'
export default {
  name: 'ComprehensiveSituation'
}
</script>
<style>
    html,body{
        padding: 0;
        margin: 0;
        width: 100%;
        height: 100%;
    }
</style>
<style scoped lang="less">
    .comprehensive{
        background-image: url("../../../assets/img/background.png");
        background-position: center;
        background-size: cover;
        height: 100vh;
        width: 100vw;
    }
    li{
        padding:0;
        margin:0;
        list-style:none
    }
    .comprehensive{
        display: grid;
        grid-template-rows: 1.54rem 0.4rem 1fr;
        >header{
            width: 100%;
            background-image: url("../../../assets/img/zh-title.png");
            background-repeat:no-repeat;
            background-size:100% 100%;
            .title{
                text-align: center;
                font-size: .36rem;
                padding-top: .19rem;
                color: #fff;
            }
        }
        .timeDv{
            font-size: .2rem;
            color: #b0b0b0;
            padding-left: 20px;
        }
        >article{
            display: grid;
            grid-template-columns: 1fr 2fr;
            .leftContent{
                display: grid;
                padding: 0;
                margin: 0;
                grid-template-rows: 33.33% 33.33% 33.33%;
                .fixedWH{
                    background-image: url("../../../assets/img/wh.png");
                    background-repeat:no-repeat;
                    background-size:100% 100%;
                }
            }
            .rightContent{
                display: grid;
                grid-template-rows: 2fr 1fr;
                .topDv{
                    display: grid;
                    grid-template-columns: 1fr 1fr;
                    .topLeft{
                        display: grid;
                        grid-template-rows: 0.79rem 1fr;
                        .topTitle{
                            display: grid;
                            padding: 0;
                            margin: 0;
                            grid-template-columns: 1fr 1fr 1fr;
                            grid-template-rows: .79rem;
                            li{
                                background-image: url("../../../assets/img/li.png");
                                background-repeat:no-repeat;
                                background-size:100% 100%;
                            }
                        }
                        .topContent{
                            background-image: url("../../../assets/img/content.png");
                            background-repeat:no-repeat;
                            background-size:100% 100%;
                        }
                    }
                    .topRight{
                        display: grid;
                        grid-template-rows: 50% 50%;
                        .fixedWH{
                            /*width: 5.65rem;*/
                            background-image: url("../../../assets/img/wh.png");
                            background-repeat:no-repeat;
                            background-size:100% 100%;
                        }
                    }
                }
                .bottomDv{
                    background-image: url("../../../assets/img/table.png");
                    background-repeat:no-repeat;
                    background-size:100% 100%;
                }
            }
        }

    }
</style>
